<template>
    <div>
        <h2>公告信息添加</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right"><span>*</span>标题</td>
                    <td>
                        <input type="text" v-model="queryInfo.Title">
                    </td>
                </tr>

                <tr>
                    <td align="right">公告内容</td>
                    <td>
                        <textarea rows="5" cols="50" v-model="queryInfo.Desc"></textarea>
                    </td>
                </tr>

                <tr>
                    <td align="right">公告图片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="queryInfo.Photo" height="100" width="100" v-if="queryInfo.Photo!=''" alt="">
                    </td>
                </tr>

                <tr>
                    <td align="right"><span>*</span>状态</td>
                    <td>
                        <input type="radio" name="state" :value="0" v-model="queryInfo.State">显示
                        <input type="radio" name="state" :value="1" v-model="queryInfo.State">隐藏
                    </td>
                </tr>

                <tr>
                    <td align="right"><span>*</span>类型</td>
                    <td>
                        <select v-model="queryInfo.TypeName">
                            <option value="">请选择</option>
                            <option :value="item.Name" v-for="item in data.list" :key="item.Id">{{item.Name}}</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="button" value="添加" class="btn btn-primary" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import {useRouter,useRoute} from 'vue-router'
const router=useRouter();
const route=useRoute();
import moment from 'moment';

//-----下拉绑定-----
onMounted(()=>{
    getBang();
})
let data:any=reactive({
    list:[]
})
const getBang=()=>{
    axios({
        method:'get',
        url:'/api/Info/ShowType'
    })
    .then(res=>{
        console.log(res);
        data.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
//---图片上传---
const img=(e:any)=>{
    var obj=e.target.files[0];
    var f=new FormData();
    f.append('file',obj);

    axios({
        method:'post',
        url:'/api/Info/UpFileImg',
        data:f
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1){
            alert('图片格式不正确');
            return;
        }
        if(res.data==-2){
            alert('图片大于2兆');
            return;
        }
        queryInfo.Photo=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

//考试完成

//---添加---

let queryInfo=reactive({
  "Title": "",
  "Desc": "",
  "Photo": "",
  "State": '',
  "TypeName": "",
})

const ok=()=>{
    //有效性验证
    if(queryInfo.Title==""){
        alert('标题不能为空');
        return;
    }
    if(queryInfo.Title.length>20){
        alert('标题不能大于20个字')
        return;
    }
    let reg=/^[\u4e00-\u9fa5]{1,20}$/;
    if(!reg.test(queryInfo.Title)){
        alert('标题只能是中文');
        return;
    }
    
    if(queryInfo.Desc.length>50){
        alert('公告内容不能大于50个字')
        return;
    }
    if(queryInfo.State===""){
        alert('状态必选');
        return;
    }
    if(queryInfo.TypeName==""){
        alert('类型必选');
        return;
    }

    //返回网络请求
    axios({
        method:'post',
        url:'/api/Info/AddInfo',
        data:queryInfo
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1){
            alert('标题不能重复');
            return;
        }
       if(res.data>0){
        alert('成功');
        router.push('/')
        return;
       }
       else{
        alert('失败');
       }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>
span{
    color: red;
}
</style>